<template>
  <div id="my-earnings">
    <div class="selector">
      <div class='select' @click="brand">
        {{dealloan}}<x-icon type="ios-arrow-up" size="20" v-show="show01"></x-icon>
        <x-icon type="ios-arrow-down" size="20" v-show="!show01"></x-icon></div>
      <p class="clear"></p>
    </div>
    <div v-transfer-dom class="popup-client">
      <popup v-model="show01" position="top" max-height="50%" >
        <group>
          <cell v-for="(i,index) in chooselist01" :key="i" v-if="i">
            <div @click="choosebrand(index, i)">{{i}}</div>
          </cell>
        </group>
      </popup>
    </div>
    <div v-transfer-dom class="popup-client">
      <popup v-model="show02" position="top" max-height="50%">
        <group>
          <cell v-for="(i,index) in chooselist02" :key="i" v-if="i">
            <div @click="choosetime(index, i)">{{i}}</div>
          </cell>
        </group>
      </popup>
    </div>
    <scroller lock-x scrollbar-y use-pullup  @on-pullup-loading="loadMore"  v-model="status" ref="scroller">
      <div class="box2">
        <div style="height:1rem"></div>
        <load-more style="margin-top:2rem" v-if="nodatashow" :show-loading="false" :tip="'暂无记录'"></load-more>
        <div class="product-earnings" v-for="(item, index) in earningslist" :key="index">
          <flexbox class="flex-product" :class="'recordListBox'">
            <flexbox-item class="timeBox">
              <span class="typeNameBox">{{item.tranTypeName}}</span>
              <span>{{item.createTime}}</span>
            </flexbox-item>
            <flexbox-item class="monyeBox">
              {{item.tranAmt}}<span>元</span>
            </flexbox-item>
          </flexbox>
        </div>
      </div>
      <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
        <span v-show="status.pullupStatus === 'default'"></span>
        <span class="pullup-arrow" v-show="status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">松开加载</span>
        <span v-show="status.pullupStatus === 'loading'"><spinner type="ios-small"></spinner></span>
      </div>
    </scroller>
  </div>
</template>
<script>
var timeStamp = String(parseInt(Number(new Date()) / 1000))
import {Tab, TabItem, Flexbox, FlexboxItem, TransferDom, Popup, Group, Cell, LoadMore, Scroller, Spinner } from 'vux'
import api from '../api'
import utils from '../utils'
export default {
  directives: {
    TransferDom
  },
  data () {
    return {
      earningslist: [],
      chooselist01: ['收入','支出','全部'],
      chooselist02: ['全部', '今天', '3天内', '7天内', '30天内'],
      dealloan: '类型',
      dealtime: '时间',
      tokenval: '',
      show01: false,
      show02: false,
      show13: false,
      nodatashow: false,
      PageNum: 100,
      count: 1, // 记录页数
      downnum: 0,
      partnerid: '',
      pullupEnabled: true,
      status: {
        pullupStatus: 'default',
        pulldownStatus: 'default'
      }
    }
  },
  components: {
    Flexbox,
    FlexboxItem,
    Popup,
    Group,
    Cell,
    LoadMore,
    Scroller,
    Spinner,
    Tab,
    TabItem,
  },
  created () {
    window.document.title = '收支明细'
    this.tokenval = utils.AuthToken(timeStamp, this.$store.state.userkey)
    this.apiEarnings(this.PageNum, this.downnum, this.partnerid)
    utils.jssdkwx(api, this.$wechat, this.$store)
  },
  methods: {
    apiEarnings (PageNum, downnum, partnerid) {
      let params_1 = {
        token: this.tokenval,
        userId: this.$store.state.userID,
        timestamp: timeStamp,
        page: 1,
        perPage: PageNum,
        type: partnerid || "",
        searchDate: downnum,
      }
      api.BalancePayment(params_1).then(res => {
        if (res.status === 200 || res.status === "200") {
          if (res.data) {
            if (res.data.list) {
              this.nodatashow = false
              this.earningslist = res.data.list
            } else {
              this.nodatashow = true
            }
          } else {
            this.nodatashow = true
          }
        }
      })
    },
    loadMore () {
      this.count ++
      this.PageNum = this.count * 10 + 100
      this.$vux.loading.show({
        text: '加载更多'
      })
      setTimeout(() => {
        this.apiEarnings(this.PageNum, this.downnum, this.partnerid)
        setTimeout(() => {
          this.$refs.scroller.donePullup()
        }, 10)
      }, 2000)
    },
    brand () {
      this.show01 = !this.show01
      this.show02 = false
    },
    time () {
      this.show02 = !this.show02
      this.show01 = false
    },
    choosebrand (index, val) {
		//提现加链接 该个人中心公告 该列表字体
      this.show01 = !this.show01
      this.dealloan = val
      this.earningslist = []
      if (index === 0) {
        this.partnerid = 1
        this.apiEarnings(this.PageNum, this.downnum, this.partnerid)
      } else if (index === 1){
        this.partnerid = -1
        this.apiEarnings(this.PageNum, this.downnum, this.partnerid)
      }else{
      	this.partnerid = "";
        this.apiEarnings(this.PageNum, this.downnum, this.partnerid)
      }
      this.show02 = false
    },
    choosetime (index, val) {
      this.show02 = !this.show02
      this.downnum = index
      this.dealtime = val
      this.earningslist = []
      this.apiEarnings(this.PageNum, this.downnum, this.partnerid)
    }
  }
}
</script>
<style lang="less" rel="stylesheet/less" scoped>
#my-Balance,#my-earnings{
  background:white;
}
</style>